<template>
	<view class="square-info">
		<u-navbar
			:background="navBarBackground"
			:title-color="titleColor"
			:borderBottom="false"
			back-icon-name="arrow-leftward"
			:back-icon-color="backColor"
			:title="squareInfo.title"
			:immersive="true">
		</u-navbar>
		<view class="square-info-hd" v-if="squareInfo">
			<image mode="aspectFill" :src="squareInfo.cover_img" class="bg"></image>
		</view>
		<view class="square-info-bd">
			<view class="auth" v-if="squareInfo">
				<view class="cover-img">
					<view class="views"><u-icon name="eye" color="#FFF" size="24"></u-icon><text>{{squareInfo.click}}</text></view>
					<image mode="aspectFill" :src="squareInfo.cover_img"></image>
				</view>
				<view class="content-info">
					<view class="name">{{squareInfo.title}}</view>
					<view class="auth-info"><image mode="aspectFill" :src="squareInfo.user.heard_img"></image><text>{{squareInfo.user.nickname}}</text></view>
				</view>
			</view>
			<view class="des">说明：<text>{{squareInfo.content}}</text></view>
			<view class="square-info-bd-scroll-view">
				<view class="scroll-view-box">
					<view class="square-info-bd-item" v-for="(data,index) in goodsList" :key="index" v-if="goodsList.length" @click="goGoodsInfo(data.goods_id,data.goods_type)">
						<view class="del" @click.stop="del(data.id,index)" v-if="squareInfo.is_delete==1"><u-icon name="close-circle" size="40"></u-icon></view>
						<image mode="aspectFill" :src="data.image"></image>
						<view class="goods-name">{{data.goods_name}}</view>
						<view class="goods-price" v-if="isLogin">￥<text>{{data.retail_price}}</text></view>
						<pt-noLogin v-else></pt-noLogin>
					</view>
				</view>
				<view class="go-pro-list" @click="goProList" v-if="goodsList.length && squareInfo.is_delete==1">去逛逛</view>
				<pt-loading-more v-if="loading" bgColor="#FFF"></pt-loading-more>
				<pt-nomore v-if="goodsList.length && noMore" bgColor="#FFF"></pt-nomore>
				<pt-nothing 
					bgColor="#FFF" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
					:showBtn="squareInfo.is_delete==1?true:false"
					v-if="!goodsList.length && noMore">
				</pt-nothing>
			</view>
		</view>
		<view class="my-square-created-my" v-if="squareInfo.is_add==1" @click="add">
			<view class="my-square-created-my-btn">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/c786dcd82ef44fdce7d4e196dc21ed5e.png"></image>
				<text>加入我的广场</text>
			</view>
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				square_id: '',
				squareInfo: '',
				loading: false,
				noMore: false,
				goodsList: [],
				page: 0,
				isLogin: false,
				navBarBackground: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				titleColor: 'transparent',
				backColor: '#FFF'
			};
		},
		onPageScroll(e) {
			this.navBarBackground.backgroundColor = 'rgba(255,255,255,'+ e.scrollTop / 200+')';
			this.titleColor = 'rgba(0,0,0,'+ e.scrollTop / 200+')';
			if(e.scrollTop > 10){
				this.backColor = '#000';
			}else{
				this.backColor = '#FFF';
			}
		},
		onLoad(options) {
			this.square_id = options.square_id
			this.init()
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.loading = true
				this.page++
				this.init()
			}
		},
		methods: {
			init(){
				this.$u.api.SquareInfo({square_id: this.square_id}).then(res => {
					this.squareInfo = res.datas
					this.$u.mpShare = {
						title: this.squareInfo.title,
						imageUrl: this.squareInfo.cover_img,
						path: '/square/square-info?square_id='+this.square_id
					}
				}).then(() => {
					this.$u.api.SquareGoodsList({square_id: this.square_id,page: this.page,limit: 20}).then(res => {
						this.loading = false
						if(res.datas.list.length){
							res.datas.list.forEach(item => {
								this.goodsList.push(item)
							})
						}else{
							this.noMore = true
						}
					})
				})
			},
			goGoodsInfo(goods_id,goods_type){
				switch (goods_type){
					case 1:
						getApp().goProInfo(goods_id)
						break;
					case 2:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+goods_id
						})
						break;
					case 3:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+goods_id
						})
						break;
					case 4:
						getApp().goProInfo(goods_id,true)
						break;
					case 5:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/light/light-product-info?isMerchant=true&goods_id='+goods_id
						})
						break;
				}
				this.addFoot('家居广场-详情-查看商品详情',goods_id)
			},
			add(square_id){
				if(!uni.getStorageSync('userInfo')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否添加此家居广场？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.SquareTransfer({square_id: this.square_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '添加成功',
								})
								this.addFoot('家居广场-详情-添加到我的')
							})
						}
					}
				})
			},
			del(id,index){
				uni.showModal({
					title: '温馨提示',
					content: '是否移除此商品？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.DelSquareGoods({id: id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '移除成功',
									success: () => {
										this.goodsList.splice(index,1)
									}
								})
							})
						}
					}
				})
			},
			addFoot(where,goods_id,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
			goProList(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result'
				})
			},
		}
	}
</script>

<style lang="scss">
	.square-info{
		.square-info-hd{
			position: relative;
			height: 580rpx;
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
				background: linear-gradient(to top, rgba(0, 0, 0, 1) 25%, rgba(255, 255, 255, 0.4) 90%);
				left: 0;
				top: 0;
			}
			.bg{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				filter: blur(5rpx);
			}
		}
		.square-info-bd{
			background-color: #FFF;
			margin-top: -210rpx;
			position: relative;
			z-index: 10;
			border-radius: 30rpx 30rpx 0 0;
			min-height: calc(100vh - 580rpx);
			padding-bottom: 120rpx;
			padding-top: 1rpx;
			/deep/ .nothing{
				padding-top: 0 !important;
			}
			.go-pro-list{
				width: 200rpx;
				background-color: #141414;
				margin: 30rpx auto 0;
				border-radius: 8rpx;
				color: #FFF;
				text-align: center;
				padding: 15rpx 0;
			}
			.square-info-bd-scroll-view{
				.scroll-view-box{
					display: flex;
					flex-wrap: wrap;
					align-items: flex-start;
					padding: 0 30rpx 30rpx;
				}
			}
			.square-info-bd-item{
				margin: 30rpx 30rpx 0 0;
				width: 210rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
				position: relative;
				.del{
					position: absolute;
					z-index: 1;
					right: 0;
					top: 0;
					color: #F59359;
					background-color: #FFF;
					border-radius: 0 8rpx 0 8rpx;
				}
				image{
					width: 210rpx;
					height: 210rpx;
					border-radius: 8rpx;
				}
				.goods-name{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 24rpx;
					color: #28221F;
					margin-top: 20rpx;
				}
				.goods-price{
					font-size: 22rpx;
					color: #F59359;
					margin-top: 20rpx;
					text{
						font-size: 28rpx;
					}
				}
			}
			.auth{
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-top: -110rpx;
				position: relative;
				.cover-img{
					position: relative;
					box-shadow: 0 0 20rpx rgba(0,0,0,.3);
					border-radius: 16rpx;
					.views{
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;
						border-radius: 16rpx 0 16rpx 0;
						background-color: rgba(0,0,0,.5);
						color: #FFF;
						font-size: 24rpx;
						padding: 0 20rpx;
						height: 36rpx;
						display: flex;
						align-items: center;
						text{
							margin-left: 10rpx;
						}
					}
					image{
						border-radius: 16rpx;
						width: 216rpx;
						height: 216rpx;
					}
				}
				.content-info{
					flex: 1;
					min-width: 0;
					margin-left: 30rpx;
					.name{
						font-size: 36rpx;
						font-weight: bold;
						color: #FFF;
					}
					.auth-info{
						display: flex;
						align-items: center;
						margin-top: 40rpx;
						image{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
						}
						text{
							color: #757575;
							margin-left: 20rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.des{
			padding: 0 30rpx;
			margin-top: 40rpx;
			text{
				color: #666;
			}
		}
		.my-square-created-my{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			background-color: #FFF;
			z-index: 11;
			.my-square-created-my-btn{
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #141414;
				color: #FFF;
				border-radius: 8rpx;
				image{
					width: 36rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
